<template>
  <div class="student">
    <h2>姓名:{{ name }}</h2>
    <h2>性别: {{ sex }}</h2>
    <h2>当前求和为:{{ number }}</h2>
    <button @click="add">点我加一</button>
    <button @click="sendStudentName">把学生名传递给app</button>
    <button @click="unbind">解绑自定义(personalEvent)事件</button>
    <button @click="death">销毁当前student组件的实例对象</button>
  </div>
</template>

<script>

export default {
  name: "Student",
  data () {
    console.log(this);
    return {
      name: '张三',
      sex: '男',
      number: 0
    }
  },
  methods: {
    add () {
      console.log(`add回调被调用了`);
      this.number++;
    },
    sendStudentName () {
      this.$emit('personalEvent', this.name, 666, 777, 888);// emit触发绑定在指定vc上的自定义事件,vc实例对象可以使用该方法，后面多余参数演示es6的参数收集
      // this.$emit('demo'); //同时触发两个事件
      // this.$emit('click'); 如果在组件身上使用原生事件不加native修饰符则会让vue认为你这是自定义事件
    },
    unbind () {
      this.$off('personalEvent'); //解绑一种自定义事件
      // this.$off([ 'personalEvent', 'demo' ]);// 解绑多个自定义事件，参数为包含多个事件名的数组
      // this.$off(); //比较暴力，解绑所有自定义事件
    },
    death () {
      this.$destroy(); //销毁当前组件实例，销毁后所有该实例的自定义事件全部失效
    }
  }
}
</script>

<style scoped>
.student {
  background: orange;
  padding: 5px;
  margin-bottom: 10px;
}
</style>
